Previous Next Contents Generated Index Doc Set



CHAPTER 5 : Beans View

The "Beans" page of the method editing panel in the Class Editor, shown in Figure 5-2, is the tool for building the user interface of your application. User interfaces in Java are built hierarchically with AWT components grouped inside containers and containers inside a window or dialog. Each container controls the way its children are laid out and behave when resized. Figure 5-1 shows how Java components may be organised in a simple dialog. The topmost view is the dialog as it appears on your screen, in the middle is a tree view showing how you would build up the hierarchy of AWT components and the view at the bottom is a schematic, theoretical diagram of the containments.


Note - The schematic view is for clarification only - Visaj does not display this view.

Figure  5-1 Java Containment Hierarchies

The graphical editor for containment hierarchies is found on the left of the Class Editor. Each method in your class can have a containment hierarchy defined for it. Select a method from the class structure view and check that the panel labelled "Beans" is visible on the left. This panel is a graphical tool for building user interfaces.

There are two main areas: the containment hierarchy and the object palette. The design area is the place where containment hierarchies are built and invisible beans are displayed. The object palette displays all objects available to you for building up your user interface. This is described in more detail in the Object Palette section on page 59. The Opening Other Palette Files section on page 59 and the Loading JAR Files section on page 60 describe two ways of adding objects to the palette.

Figure  5-2 Beans View


Dynamic Display

The dynamic display is a preview of the window you are designing, showing how it will look when the code is generated, compiled and run. The dynamic display is a floating window, as shown in Figure 5-2.

The dynamic display and the containment hierarchy can be recreated by pressing the Reset button on the toolbar (or selecting "Reset" from the Object menu). The selected object and its children are rebuilt using any properties you have set for them. If no objects are selected in the design area, the whole hierarchy is rebuilt. Use this option when you have made many settings to ensure that the dynamic display accurately reflects your design.


Dummy Frames

If the root of your hierarchy is not a window capable of being displayed on your screen, Visaj will place the dynamic display for your hierarchy in a suitable window with the title "Dummy Frame". This is useful if you want to create a method which creates a component or group of components - for example, a group of labels and text fields which you wish to use again and again in your application. Or you may have a Choice component which you have loaded with a list of color names which you wish to use in multiple dialogs; making the Choice a hierarchy on its own would allow you to do this.


Building Hierarchies

To create containment hierarchies, click over the objects in the object palette. If no objects are selected in the design area, the new object becomes the root of a hierarchy. Visaj assists you in creating a viable hierarchy by only allowing you to select those objects which can be made children of the selected object; all others are made insensitive.


Note - With the Swing component set, all components can take children.

Objects are added as children of the current selection. As objects are added, they are automatically selected if they are themselves containers. If not, the parent remains selected. With the Swing set, Visaj only selects containers automatically even though all components may take children.

To start another hierarchy in the same method, make sure that no objects are selected in the design area and then select the new root object from the object palette. Clicking on the design area background deselects all objects.

Select an object in the hierarchy by clicking over it. To select more than one object, drag a rectangle over them or hold down the Shift key to add to the selection list.


Object Palette

Objects are divided into groups on the palette. Each group is labelled. The group label is a toggle button which, when selected, folds away or unfolds that group.

By default, only the icon representing the object is shown on the palette. By selecting "Show labels" from the Palette menu, you can also see the name of the object.

Invisible Java beans also appear on the object palette. When you add them to the method they appear at the top of the design area.

There are two ways of adding objects to the palette: opening another palette file and loading a JAR file. You also have the option of changing the entire palette you are using. All of these are described below.

Opening Other Palette Files

Add objects to the palette by selecting "Merge palette file..." from the Palette menu. You are prompted for the name and location of the pre-defined palette file. The format of a palette is described in the Palette File section on page 162. For Visaj to find the objects listed in the palette file, make sure that you have set your CLASSPATH environment variable1 to give the location of the separate class files or the JAR file containing the classes.

Taking the trouble to define a palette file gives you more flexibility over the grouping of objects when they appear on the palette and over which objects are loaded from a JAR file.

If you have saved a design which uses a bean from a merged palette, Visaj tries to load the bean for you automatically when you next open that design.

Loading JAR Files

Add objects to the palette by selecting "Load Jar file..." from the Palette menu and giving the name and location of a JAR file in the File Dialog. Visaj adds all beans in the JAR file to the palette, grouping them under one heading which is the name of the JAR file. You do not need to set your CLASSPATH environment variable1 for this option. Although this is often easier than creating palette files, you cannot control which objects are loaded as Visaj will load in all the beans it finds in the file and they are all grouped together.

If you have saved a design which uses a bean from a loaded JAR, Visaj tries to load the JAR for you automatically when you next open that design.

Change Palette

The Palette menu contains a pullright menu, labelled "Change", with two items: "AWT" and "Swing". Selecting these options changes your current palette to the AWT components or the Swing set respectively. See Chapter 7, "Swing Component Set" for information on using Swing.

Using this method, the palette is changed and not merged with existing components. Use "Merge palette file..." if you wish to merge the components on your palette with AWT or Swing components.

In order to change to the Swing palette, you must have the Swing classes in your CLASSPATH. See the Loading Swing Components section on page 90 for more details.


Properties

All objects have properties. These include, for example, the colors, dimensions, label and visibility of the object. Many (sometimes all) of these properties are inherited from an object's superclass. To edit the properties of an object, either double-click the object in the hierarchy area or select the object and select Properties from the Object menu or from the toolbar. This causes the Property Sheet to be displayed, as shown in Figure 5-3.

Figure  5-3 Property Sheet for a Label

The Property Sheet is organized in the form of a tree, with each node indicating from which superclass the properties have come. Each node in the tree can be folded or unfolded. This is most useful where there are a large number of properties which can be changed. Next to each property there is a pencil icon which indicates whether or not the property is editable. If the pencil is "crossed out" (has a line across it), it cannot be edited.

To edit a property, select it in the tree. The lower area of the Property Sheet displays the options available for that property or a means of entering a value. Properties are set as soon as they are changed. They take immediate effect in the dynamic display.

The "Undo" button at the bottom of the property sheet undoes the last change made in the current property sheet.


Note - See the Packing Frames section on page 153 for special information concerning the size property for Frame and JFrame components.

Variable Name

The Property Sheet contains a field at the top of the window labelled "Variable Name". Although this is not a true property in the same sense as the other properties in this window, it is a value associated with the selected object. The variable name is the name used to refer to the object in the generated code.

Variable Scope

The field at the top of the Property Sheet labelled "Variable Scope" provides a means of controlling the declaration scope of an object. When this field is selected, two option menus appear in the editing area at the bottom of the Property Sheet. One of the menus allows you to choose whether the object is an "Instance" or a "Local" variable. This affects where the object is declared; instance variables are declared as members of the Class, local variables are declared in the current method and are therefore not accessible from the rest of the Class. The other option menu only applies when you have chosen "Instance variable" and refers to the accessibility of it. There are four options:

  1. Default. This is the default assigned by Java when none of the other options are specified. It means that the variable is only accessible from the current class and other classes in the same package. Even subclasses, when they are not in the same package, would not be able to access them.
  2. public. This makes the variable visible everywhere.
  3. private. The variable is only accessible within the class in which it has been declared.
  4. protected. When "protected", the variable is visible within the current class, all subclasses and all classes in the same package.

Object Initialization

This field in the Property Sheet enables you to control the way in which any object in your design is initialized. By default, a new instance of the object is created. You may change this to one of the following:

  1. New
  2. Beans instantiation
  3. Code Expression
  4. Variable Name
  5. Deserialization
  6. No Initialization

Each of these is described in the following sub-sections.

New

This is the default for non-serialized beans. A new instance of the object is created. This option is not present for serialized beans which you have loaded onto your palette as there is no new method for them.

Beans instantiation

Select this option to instantiate the bean. A call to Beans.instantiate is generated, passing in the name of the bean.

Code Expression

You may type any arbitrary expression for the initialization of the object. Use this option when you wish to initialize the object from a routine in another part of your application, for example.

Variable Name

Typing the name of a variable into the text field will cause Visaj, when requested, to generate the code to assign that variable to your object. Visaj simply generates the assignment. You must check that you have typed the name correctly and that the variable is in scope.

Deserialization

If this is the selected option, the object is created by being deserialized out of the serialization file specified in the text field. The serialization file, whose name you provide here, is generated by Visaj when the Java class files are generated. This is described in the What is Generated section on page 152. Visaj provides a default name for the serialization file based on the variable name of the object.

This option is the default for any serialized beans which you may have loaded onto your palette.

Visaj automatically sets the "Object Initialization" property to "Deserialization" when you customize a bean. If you subsequently change this option, the customization will not take effect in the generated code. More about customizing beans is given in the Customizers section on page 68.

No Initialization

The object will not be initialized in the generated code.

Code Expression, Value and Variable Name

When editing normal properties (that is, properties other than those listed under "Code Properties"), the lower editing area displays an option menu containing the items "Value", "Code expression" and "Variable Name". Choosing either "Code Expression" or "Variable Name" causes a text field to be displayed where you may type in either any expression, which is then used to set the selected property, or the name of a variable which is in scope. For example, you may wish to call a method which returns a property value, or you may wish to create a new instance of a class to assign to the property. These expressions are not used dynamically inside Visaj, but you will see its effect when the generated code is run. One example of the use of the "Variable Name" option is given in the Using CheckboxGroups section on page 76.

Reset to Default Value

At the bottom of the property sheet there is a button labelled "Reset to default value". This is enabled if you have changed the selected value in the property sheet and, once pressed, sets the value back to the default.

Setting Color and Font Properties

To set a color or font property using the Color or Font Selector, drag the required color or font from the sample window of the Selector either into the editing area at the bottom of the property sheet when an appropriate property is selected or directly onto the property value where it is displayed in the property sheet. The Color and Font Selectors are available from the Windows menu of the main Visaj window. For more details on using the Selectors, see the Font Selector section on page 52 and the Color Selector section on page 53.

Default Labels

Objects such as Buttons, Labels and Checkboxes are given a unique default label based on the object name and a number, as shown in Figure 5-4. Visaj does this so that the object displays properly in the dynamic display; without a label, the object would shrink very small and, in the case of Labels, would not be visible at all.

Figure  5-4 Default Labels Assigned by Visaj

If you do not set your own labels using the Property Sheet, the default labels are generated into the code so that the final application looks exactly as you see in Visaj.

Image Properties

Many objects have image properties. The Frame, for example, has "iconImage", which is the image it displays when iconized. When this type of property is selected, the property editor shown in Figure 5-5 appears at the bottom of the property sheet.

Figure  5-5 Image Property Editor

The option menu at the top of this section lets you choose the standard types of value for a property. Choosing "Image resource" (and for Swing "Swing ImageIcon resource") lets you provide an image file to load immediately and the location of it at runtime.

Runtime Resource Path

The "Runtime resource path" is the name of the image, optionally including its package, to be used when the generated code is run.

In the generated code, image files are loaded as resources using the class loader. The string typed into the "Runtime resource path" text field is passed directly to the class loader method getResource. See your Java documentation for a detailed description of the mechanism used by getResource. The Books on Java section on page 209 lists some suggested books.

If, at runtime, your image cannot be found a NullPointerException is displayed. Check that you have entered the correct package name in Visaj and that your CLASSPATH is set correctly.

Design Time File

When you press apply, Visaj tries to load the image specified as "Design-time file" and displays it in the property sheet. If the image cannot be located, an error dialog is displayed.

Multiple Selection

You may select multiple objects by either dragging a rectangle around them or by holding down the Shift key while selecting to add to the selection. If more than one object is selected, the property sheet displays only those properties which are common to all the selected objects.

Layout Properties

Some properties affect the layout manager, which is itself a property of an object. One example of such properties is the number of rows and columns in a Grid. To set the properties of a layout manager, press the Properties icon in the toolbar of the Layout Editor. Layout Editors are described in the Layout Editors section on page 69.


Customizers

Objects which are Java Beans are often provided with a Customizer. This is a means of setting properties of the bean in addition to those available from the Property Sheet. See the Properties section on page 60 for more information on Property Sheets. If a customizer is available for an object, the "Customize..." option in the Object menu is sensitive. An example of such a dialog is shown in Figure 5-6.

Figure  5-6 Customizer


Customizers provide the means of populating List and Choice components.

When you customize a bean, Visaj changes its "Object Initialization" property to "Deserialization". If you change this property back to "New", your customization will not take effect in the generated code. Changing the "Object Initialization" property is described in the Object Initialization section on page 63.


Layout Editors

All components which are containers (Frame, Panel etc.) have a layout associated with them which controls how the children of the container are arranged. To find out how to apply a particular layout to a container, see the Using and Applying Layouts section on page 74.

There are a number of different types of layout which are part of the Java AWT and more supplied by individual component vendors. These layouts allow you to arrange the objects within the container in a specified way. To do this dynamically, use Visaj's Layout Editor. Select the Layout icon from the toolbar when a container is selected in the hierarchy. The Layout Editor is displayed in its own window with layout functions appropriate to the type of layout set on the container component. Changes that are made in the Layout Editor are reflected immediately in the dynamic display.

The layout types supported by default are:

  1. GridBag (from the Java AWT package)
  2. Grid (from the Java AWT package)
  3. SuperGrid (from the IST Diamonds)
  4. Flow (from the Java AWT package)
  5. Border (from the Java AWT package)
  6. BoxLayout (from the Swing component set)
  7. Null (no layout)

These are described individually below.


Note - To undo and redo actions in the Layout Editor, use the Undo or Redo buttons in the Class Editor to which it belongs.

Grid

Components may be swapped around within the grid by dragging them over one another but the number of rows and columns, along with the horizontal and vertical spacing is set from the Property Sheet. Do this by pressing the property sheet icon in the toolbar of the Layout Editor. Since the order of the components in the containment hierarchy must be the same as the order in the Grid layout, when objects are re-ordered in the Layout Editor their order is automatically changed to reflect this in the hierarchy.

SuperGrid

A Layout Editor for the SuperGrid Diamond is also supplied. The SuperGrid Layout Editor is very similar to that of the Grid, allowing you to re-order objects within a grid. The order of components in the containment hierarchy dictates the order in which they appear in the Layout Editor. In order to retain this parallel (so that your generated code will act exactly as Visaj shows), the ordering of objects in the hierarchy is updated as objects are re-ordered in the Layout Editor. Properties such as the number of rows and columns are edited in the Property Sheet, as described for the Grid Layout Editor. For more information on the SuperGrid layout, see the SuperGrid Layout section on page 195.

Flow

The Flow Layout Editor is also similar to that of the Grid, except that it is effectively one long row which is wrapped around according to the size of the containing window. Children can be re-ordered by dragging them over one another. The Layout Editor simply displays one long row; the dynamic display shows the wrap-around of this row, as you resize the window.

Border

The Border Layout Editor shows the geographical positions possible (North, West, Center, East and South) and allows you to drag components into these positions. If a component already occupies the position, the two components are swapped.

Figure  5-7 Border Layout Editor

By default, a Frame component is given a Border layout and a Panel is given a Flow layout.

Null Layout (Absolute Positioning)

Using the Property Sheet you may choose "Null" for the layout of a container. This means that the container has no layout manager associated with it. This is useful if you wish to use absolute positioning to lay out the children of the container. Although there is no layout manager, the Layout Editor still allows you to move and resize the child components.

Use the four alignment buttons in the toolbar of the layout editor, shown in Figure 5-8, to ensure that your objects are aligned neatly. The buttons become sensitive when more than one object is selected. The objects are aligned to the last selection.

Figure  5-8 Alignment Buttons in Layout Editor

GridBag

The GridBag layout is the most flexible and most complicated of the layout types.

Figure  5-9 GridBag Layout Editor

The alignment buttons in the toolbar of the GridBag Layout Editor work exactly as described for the Null layout, above.

The area on the right of the editor window allows you to edit the GridBag Constraints for a particular component in the GridBag. Select the component in the grid area by pressing the mouse button with the cursor over it. Edit the constraints in the text boxes on the right. The constraints are applied to the current selection as you change the focus from one text box to another.

The left area of the Layout Editor is a logical representation of the components within the GridBag. The components are not shown actual size; this makes moving and resizing easier for small components. Components can be moved around inside the GridBag and, as you do this, the GridBag itself will change its dimensions correspondingly. Components can also occupy more than one cell in the grid. Do this by selecting the component and resizing it using the handles which appear around the edge. All of these changes to the GridBag layout are effective immediately in the dynamic display.

The GridBag layout allows you position components anywhere in an arbitrary grid. This means that it is possible to have empty rows and columns between two components. The GridBag sees empty rows and columns as having zero width and height, since the width and height of a row or column is calculated by its contents. The GridBag Layout Editor indicates that a row or column has a zero width and height by displaying them in a different color (pink). Since the dynamic display shows the actual sizes of the components, the empty rows and columns appear not to be there.

BoxLayout

The Swing component set includes BoxLayout. This is a layout manager which places each of its children from left to right or from top to bottom, according to the parameter passed in when the BoxLayout is created. Components are arranged from left to right (or top to bottom), in the same order as they were added to the container. Visaj lets you use the BoxLayout via the Box class. Box is a container which uses BoxLayout. A Layout Editor is provided for BoxLayout. All of this is described in the Swing Tips section on page 95.


Using and Applying Layouts

Layouts are selectable from the palette. When a layout is selected from the palette, it is applied to the layout property of the currently selected container. Change the layout of a container by either:

  1. Selecting another layout from the palette with the container selected in the hierarchy.

or:

  2. Change the layout property in the container's Property Sheet. See the Properties section on page 60 for details on how to do this.


Invisible Beans

Java Beans are reusable software components. Some have their own visual representation, some do not. Invisible Beans are Beans which have no visibility to the user - for example, a database access component. These Beans can be added to your palette in the same way as any other component is added - see the Palette File section on page 162 for more details on adding components to your hierarchy.

In order to add an invisible Bean to your design, make sure there is no current selection. Do this by clicking over the background of the design area. The invisible Beans are then displayed at the top of the design area, alongside the roots of hierarchies, as shown in Figure 5-10.

Figure  5-10 Invisible Bean Area

Once you have added an invisible Bean to your method, it will appear in the Event Editor, allowing you to link it in to your containment hierarchy. You may add any number of invisible Beans to your method.

Like the other objects on the palette, invisible Beans have properties editable from the Property Sheet and, if provided by the vendor, can also have customizers.

Two common types of invisible bean available on the default palette are CheckboxGroups and ResourceBundles. How to use ResourceBundles is described in the Using Resource Bundles section on page 144. CheckboxGroups are described below.

Using CheckboxGroups

CheckboxGroups provide a way of grouping Checkboxes to give them radio button behavior. As with all invisible Beans, make sure you have no current selection before adding a CheckboxGroup to your design. It then appears at the top of the design area. To apply a CheckboxGroup to a Checkbox, do the following:

  1. Display the property sheet for the Checkbox (remember that you can select more than one Checkbox and apply any changes to all of them).
  2. Select the checkboxGroup property.
  3. Select the "Variable name" option from the editor at the bottom of the property sheet.
  4. Type in the name of the CheckboxGroup you wish to apply to the Checkbox.

Although you will not see the radio behavior in the dynamic display, the generated code will display such behavior.


Using Your Beans - Creating Reusable Components

The Beans view in Visaj allows you to create standalone applications, applets and beans. Creating beans from your designs provides a way of reusing components. To generate a bean from your design, you do not need to do anything special in Visaj. Simply generate code as usual, having observed the following two points:

  1. The Class must be public.
  2. The Class must provide a default constructor with no parameters. For example:
  public MyClass()

After you have generated code you will either need to create a JAR file containing your bean or, if you only wish to use the bean in Visaj, create a palette file which references your bean. Each of these options is described in the following sub-sections.

Putting the Bean in a JAR

If you are not using an IDE which creates beans from Java sources, you will have to do this yourself. The following description tells you how.

Once you have generated code for a design which you intend to use as a bean, compile it and then create the manifest file. This is a special file that contains information about the files packaged in a JAR. The "jar" command automatically creates a default manifest file but this default does not contain the vital information that the classes the contents of this JAR constitute a bean. Therefore, you will have to create the manifest file yourself.

The manifest file must be called "MANIFEST.MF" and contains a list of all the .class files in the JAR. must also be stored inside a directory or folder named "META-INF". Here is a simple example of the contents of a JAR file containing a bean whose class name is "MyClass":

	META-INF/
	META-INF/MANIFEST.MF
	MyClass.class

To see the contents of a JAR, use the following command:

jar tvf filename.jar

The contents of the file META-INF/MANIFEST.MF are fairly simple. It just needs to list the name of the main class for the bean and indicate that this is indeed a bean. Write the following into your manifest file, replacing "MyClass.class" with the name of the main class of your bean:

	Name: MyClass.class
	Java-Bean: True

Now you need to package your files (the class file(s) for your bean and the manifest file) into a JAR. The following command does this:

jar cvfm myjar.jar META-INF/MANIFEST.MF class-files

"cvfm" stands for "c"reate, "v"erbose, "f"ile name, name of "m"anifest file.

The command line option "f" and "m" must be specified in the same order in which the corresponding files are specified.

The resulting JAR file is your bean. See the Loading JAR Files section on page 60 for details on how to load your bean onto Visaj's palette. Once loaded onto your palette you can use it in your designs. Remember that if you save any designs which use your new bean and then exit Visaj, you will need to reload the bean's JAR file before opening those saved designs.

Creating a Palette File to Reference the Bean

If you simply wish to use your newly created bean in Visaj, you can create a palette file for the bean and then use "Merge palette..." to add the bean into your existing palette. The bean can then be used inside Visaj. Remember that if you do this and save a design which uses the new bean, you will have to merge in the bean palette file before opening the saved file. See the Palette File section on page 162 for a description of palette files. Before creating the palette file. generate Java for your bean and compile the generated code.



1 Environment variables are available on UNIX and Microsoft Windows. Other platforms, such as the Apple macintosh, use their own method of setting a CLASSPATH. Please refer to the relevant Java documentation for more information.


Previous Next Contents Generated Index Doc Set

Copyright © 1998, 1999 Pacific Imperial Inc., TakeFive Software Inc. All Rights Reserved.